<!-- 退货/退款 -->
<template>
    <view class="Returns">
        <view class="Returns-top">
            <view class="top-item">
                <text class="bot-lrft">订单编号</text>
                <text class="bot-right1">123456789</text>
            </view>
            <view class="top-item">
                <text class="bot-lrft">商品名称</text>
                <text class="bot-right2">创意居家居厨房用品用具小百货家用大全.</text>
            </view>
            <view class="top-item">
                <text class="bot-lrft">商品金额</text>
                <text class="bot-right3">￥68</text>
            </view>
        </view>
        <view class="Returns-bottom">
            <text class="title">选择退款原因</text>
            <view class="bottom-item">
                <u-radio-group
                    v-model="value"
                    activeColor="#E14648"
                    iconPlacement="right"
                    placement="column"
                >
                    <u-radio activeColor="red" labelSize="12" label="拍错/多拍"></u-radio>
                    <u-radio activeColor="red" labelSize="12" label="不想要了"></u-radio>
                    <u-radio activeColor="red" labelSize="12" label="协商一致退款"></u-radio>
                    <u-radio activeColor="red" labelSize="12" label="信息填写错误"></u-radio>
                    <u-radio activeColor="red" labelSize="12" label="其他"></u-radio>
                </u-radio-group>
            </view>
        </view>
        <view class="Returns-btn">
            <text class="title">其他原因</text>
            <u-textarea
                v-model="value1"
                maxlength="150"
                height="100"
                count
                placeholder="限150字内，非必填"
            ></u-textarea>
        </view>
        <view class="btn">
            <view class="detail-btn" @click="goSubmit">提交</view>
        </view>
        <!-- 提交的模态框 -->
        <u-modal :show="showSumbit" content="你已提交退货退款，后台审核中" width="540rpx">
            <view slot="confirmButton" class="slot-confirmButton">
                <view class="slot-button" @click="goBack">返回</view>
            </view>
        </u-modal>
    </view>
</template>
<script>
export default {
    name: "Returns",
    components: {},
    mixins: [],
    props: {},
    data() {
        return {
            value1: "", //退款原因
            showSumbit: false, //提交的模态框使得否开启
        };
    },
    computed: {},
    watch: {},
    mounted() {},
    methods: {
        groupChange(n) {
            console.log("groupChange", n);
        },
        radioChange(n) {
            console.log("radioChange", n);
        },
        //点击提交弹出遮罩层
        goSubmit() {
            this.showSumbit = true;
        },
        //点击返回
        goBack() {
            this.showSumbit = false;
            uni.navigateBack();
        },
    },
};
</script>
<style lang="scss" scoped>
.Returns {
    background-color: #f7f7f7;
    .Returns-top {
        background-color: #fff;
        padding: 25rpx;
        font-size: 26rpx;
        margin: 10rpx 0rpx;
        color: #333;
        border-radius: 20rpx;
        .top-item {
            margin: 14rpx 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .bot-right3 {
                color: #e14648;
            }
            .bot-right2 {
                width: 70%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
    .Returns-bottom {
        margin: 20rpx 0rpx;
        padding: 25rpx;
        background-color: #fff;
        border-radius: 20rpx;
        .title {
            font-size: 30rpx;
            margin: 20rpx 0;
        }
    }
    .Returns-btn {
        margin: 20rpx 0rpx;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 25rpx;
        .title {
            font-size: 30rpx;
            margin: 20rpx 0;
            padding: 20rpx 0;
        }
    }
    .btn {
        box-sizing: border-box;
        margin: 0 auto;
        position: fixed;
        bottom: 40rpx;
        width: 100%;
        .detail-btn {
            width: 90%;
            bottom: 20rpx;
            text-align: center;
            color: #fff;
            padding: 18rpx 0;
            margin: 0 auto;
            border-radius: 50rpx;
            background-color: #df4748;
        }
    }
}
.slot-confirmButton {
    padding: 10rpx 10rpx 0;
    .slot-button {
        background-color: #df4748;
        margin: 0 80rpx;
        padding: 10rpx 0rpx;
        border-radius: 50rpx;
        color: #fff;
        font-size: 28rpx;
        text-align: center;
    }
}
/deep/.u-radio-label--right {
    padding: 16rpx 0rpx;
    font-size: 28rpx;
}
/deep/.u-textarea {
    margin-top: 20rpx;
}
</style>
